<template>
  <div class="index">
    <!-- v-model 双向绑定：哪一个下标的频道处于活动状态 -->
    <van-tabs v-model="active">
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <!-- 子组件 -->
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件 -->
        <!-- article-list写在了v-for中，则每次循环都会生成一个文章列表组件 -->
        <!-- van-tab具有类似于懒加载的效果 只有激活了当前的tab，才会去创建文章列表组件 -->
        <article-list :channel='channel'></article-list>

      </van-tab>
    </van-tabs>

    <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div
      v-if="$store.getters.isLogin"
      class="bar-btn"
      @click="isShowChannelEdit=true"
    >
      <van-icon name="wap-nav" />
    </div>
    <!-- 文章--更多操作 -->
    <van-action-sheet
      v-model="isShowChannelEdit"
      title="编辑频道"
    >
      <!-- 父传子 把当前订阅频道传给 频道编辑组件 -->
      <channel-edit
        :curIndex="active"
        :channels="channels"
        @change-channel='hChangeChannel'
        @fixed-active-index='hFixedActiveIndex'
      ></channel-edit>
    </van-action-sheet>

  </div>
</template>
<script>
import { getChannels } from '@/api/channel.js'
import ArticleList from './articleList.vue'
import ChannelEdit from './channelEdit.vue'
export default {
  name: 'home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 默认选中项
      channels: [], // 频道列表
      isShowChannelEdit: false // 是否显示频道编辑弹层
    }
  },
  created () {
    // 获取全部频道
    this.loadChannels()
  },
  methods: {
    // 如果你删除的频道在当前的频道之前触发
    hFixedActiveIndex () {
      this.active--
    },
    // 跳转频道
    hChangeChannel (idx) {
      // 1 关闭弹层
      this.isShowChannelEdit = false
      // 2 跳转频道
      this.active = idx
    },
    async loadChannels () {
      try {
        const res = await getChannels()
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
